var path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 调优
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const HappyPack = require('happypack') // happypack 多线程打包优化打包速度
new SpeedMeasurePlugin() // 分析显示构建速度
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/[name]@[hash].js', // @[chunkhash]消除缓存的影响
    path: path.resolve(__dirname, 'dist'),
    chunkFilename: 'js/[name]@[chunkhash].js' // 异步加载模块的命名，但是需要在异步加载的时候，用特殊注释指定命名
  },
  module: {
    rules: [{ // 处理css/sass/scss
      test: /\.(css|scss)$/,
      use: [
        // thir
        {
          loader: 'style-loader', // 用了这个，可以取代style-loader插入页面的作用
          options: {},
        },
        // sec
        {
          loader: 'css-loader',
          options: {
            sourceMap: true
          }
        },
        // fir
        {
          loader: 'sass-loader',
          options: {
            sourceMap: true
          }
        },
        // 前置处理
        'postcss-loader' // postcss-loader要求必须有一个单独的配置文件
      ],
      exclude: /node_modules/
    }, { // 检查js格式
      test: /\.js$/,
      use: ['happypack/loader?id=js'],
      include: /src/
    }, { // .ts文件实现代码类型的检查
      test: /\.ts$/,
      enforce: 'pre',
      use: ['happypack/loader?id=ts'],
      exclude: /node_modules/
    }, {
      test: /\.(png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 10240, // 超过了这个阈值，为什么不变成一个base64de 编码？
          name: 'img/[name]@[hash:7].[ext]',
        }
      },
    }, {
      test: /\.html$/,
      use: {
        loader: 'html-loader',
        options: {
          attrs: [':data-src']
        }
      }
    }]
  },
  plugins: [
    new HappyPack({
      id: 'js',
      loaders: [{
        loader: 'babel-loader',
        options: {
          cacheDirectory: true // babel 缓存机制加快打包速度
        }
      }]
    }),
    new HappyPack({
      id: 'ts',
      loaders: [{
        loader: 'ts-loader',
        options: {}
      }]
    }),
    new HtmlWebpackPlugin({
      filename: __dirname + '/dist/index.html', // build过后的文件路径及地址
      template: path.resolve(__dirname, './index.html'), // 模板语法将在哪个模板中应用
      favicon: './asset/img/play.png',
      chunkSortMode: 'dependency',
      inject: true
    })
  ]
}